import {css} from "./styles.js";
import { render } from "./html.js";
import { initializeComponents, bindEvents } from "./scripts.js";
import '../InteractionBar/index.js';
import '../../common/VideoInfo/index.js';
import '../../common/VideoPlayer/index.js';

class CustomContent extends HTMLElement {
    constructor() {
        super();

        this.attachShadow({ mode: 'open' });

        this.shadowRoot.innerHTML = `
            <style>${css}</style>
            ${render()}
        `;

        this.initializeComponents();
    }

    initializeComponents() {
        const components = initializeComponents(this.shadowRoot);
        bindEvents(components.interactionBar, components.videoInfo, components.videoPlayer);
    }
}

window.customElements.define('custom-content', CustomContent);